<template>
  <div class="nav-bar-box">
    <ul class="nav-bar">
      <li class="item" v-for="(item, index) in nav_list" :key="index">
        {{ item.name }}
        <ul v-if="item.havingItem" class="child-slide-box">
          <li class="child-slide-box-item" v-for="(val, i) in item.child_items" :key="i">{{ val }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script setup>
const nav_list = [
  {
    name: '首页',
    havingItem: false
  },
  {
    name: '模拟考试',
    havingItem: true,
    child_items: ['科目一', '科目二', '科目三', '科目四']
  },
  {
    name: '找驾校',
    havingItem: true,
    child_items: ['找驾校', '找教练', '找陪练']
  },
  {
    name: '驾考圈',
    havingItem: false
  },
  {
    name: '交通标志',
    havingItem: false
  },
  {
    name: '软件下载',
    havingItem: false
  },
  {
    name: '驾考宝典企业版',
    havingItem: false
  },
  {
    name: '智慧驾校',
    havingItem: false
  },
  {
    name: '买新车',
    havingItem: true,
    child_items: ['买车网', '平行之家']
  },
  {
    name: '二手车',
    havingItem: false
  }
]
</script>

<style scoped lang="scss">
.nav-bar-box {
  width: 100%;
  background-color: #37b5f8;
  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    .item {
      position: relative;
      width: 108px;
      height: 50px;
      white-space: nowrap;
      text-align: center;
      line-height: 50px;
      color: white;

      .child-slide-box {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: none;
        background-color: white;
        z-index: 1;
        .child-slide-box-item {
          width: 108px;
          height: 50px;
          color: #666666;
        }
        .child-slide-box-item:hover {
          color: #37b5f8;
        }
      }
    }

    .item:nth-child(7) {
      width: 148px;
      height: 50px;
      white-space: nowrap;
      text-align: center;
      line-height: 50px;
      color: white;
    }

    .item:hover {
      background-color: #54c0f9;
      cursor: pointer;
    }

    .item:hover .child-slide-box {
      display: block;
      color: #37b5f8;
    }

    .item:nth-child(2) {
      position: relative;
    }

    .item:nth-child(2)::after {
      content: '';
      position: absolute;
      top: 50%;
      border: 5px solid white;
      border-color: white transparent transparent transparent;
      margin-left: 5px;
    }

    .item:nth-child(3) {
      position: relative;
    }

    .item:nth-child(3)::after {
      content: '';
      position: absolute;
      top: 50%;
      border: 5px solid white;
      border-color: white transparent transparent transparent;
      margin-left: 5px;
    }

    .item:nth-child(9) {
      position: relative;
    }

    .item:nth-child(9)::after {
      content: '';
      position: absolute;
      top: 50%;
      border: 5px solid white;
      border-color: white transparent transparent transparent;
      margin-left: 5px;
    }
  }
}
</style>
